<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>定位</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .div1 {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: paleturquoise;
        margin: 200px;
      }

      .div2 {
        width: 150px;
        height: 150px;
        background-color: aquamarine;

        /* 
          定位 = 定位模式 + 边偏移
        
          定位模式: position
            static      默认选项,静态定位,表示元素标准流布局(元素的边偏移无效)

            relative    相对定位
                        特点:
                        1.基于元素原来的位置来作为参照物
                        2.定位的元素仍然保留原标准流的位置,后面的盒子仍然以标准流的方式看待它(不脱标)

            absolute    绝对定位
                        特点:
                        1.父元素没有开启定位模式,定位时边偏移是以浏览器边界为准
                        2.父元素开启了定位模式,定位时边偏移是以最近一级开启定位模式的父元素边界为准
                        3.绝对定位不再占有原先的位置,后面的元素会无视它的存在(脱标)

            fixed       固定定位
                        特点:
                        1.跟父元素没有任何关系,以浏览器可视窗口为参照物
                        2.元素固定在页面上,不随滚动条的滚动而滚动
                        3.固定定位不再占有原来的位置,后面的元素会无视它的存在(脱标)
                        4.固定定位是一种特殊的绝对定位,区别在于是否随滚动条一起滚动

          边偏移: top,bottom,left,right
        */
        position: fixed;
        top: 100px;
        left: 100px;
      }

      .div3 {
        width: 150px;
        height: 150px;
        background-color: palevioletred;
      }
    </style>
  </head>
  <body>
    <div class="div1">
      <div class="div2"></div>
      <div class="div3"></div>
    </div>
    <div class="div1">
      <div class="div2"></div>
      <div class="div3"></div>
    </div>
  </body>
</html>
